<template>
<div class="good-select wap">
  <x-header v-if="!this.$fromApp(this)" class="vux-1px-b" >
    <div  class="header-left display-flex align-items-center" slot="overwrite-left">
      <x-icon @click="goBack" type="ios-close-empty" size="30"></x-icon>
      <span class="title-lable"><span>商品选择</span></span>
    </div>
  </x-header>

  <div class="search display-flex justify-content-flex-justify">
    <div class="flex-1">
      <group>
        <x-input :show-clear="false" v-model="searchKey"  placeholder="请输入商品名称或品牌"></x-input>
      </group>
    </div>
    <span class="btn-search" @click="search">查询</span>
  </div>
  <div class="good-content main">


    <scroller
      ref="scroll"
      :noDataText="this.$noData(list)"
      :on-refresh="refresh"
      :on-infinite="infinite">
      <div class="list flex-1" v-if="list&&list.length>0">
        <x-table>
          <thead>
          <tr>
            <th class="id"></th>
            <th class="brand">品牌</th>
            <th class="name">商品名称</th>
            <th class="spec">商品规格</th>
            <th class="operate"></th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td @click="expandList(item,index)">
              <!--<check-icon :value.sync="" ></check-icon>-->

              <x-icon v-if="!item.expand" class="check-normal" type="ios-circle-outline" size="22"></x-icon>
              <x-icon v-if="item.expand" class="check-active" type="ios-checkmark" size="22"></x-icon>
            </td>
            <td ><span class="col-item beyond-one">{{item.brandName}}</span></td>
            <td><span  class="col-item beyond-one">{{item.name}}</span></td>
            <td><span class="col-item beyond-one">{{item.spec}}</span></td>
            <td @click="goDetail(item)">
              <img class="icon-detail" src="../../assets/img/customer/detail_tip.png" alt="">
              <span class="detail-lable">详情</span>
            </td>
          </tr>
          </tbody>
        </x-table>
      </div>
      <no-data @refreshData="refresh(0)" :list="list"></no-data>
    </scroller>




  </div>
  <div v-if="list&&list.length>0" class="btn-comfirm display-flex justify-content-flex-center align-items-center" @click="comfirm">
    <span>确认选中</span>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
          return {
            demo1: false,
            page:1,
            hasNext:true,
            list:[],
            searchKey:"",
            lastSelectIndex:{index:-1,id:''},
          }
        },
      created(){
          this.initData(0);
      },
      methods:{
        initData(type){
          this.$ajax.get("goods/list/template",(res) => {
            console.log("====res",res);
            if(res.code==200){
              if(type==0){
                this.list=res.data;
                console.log("===",this.lastSelectIndex)
                for(let i=0;i<this.list.length;i++){
                  if(this.list[i].id==this.lastSelectIndex.id){
                    this.list[i].expand=true;
                  }else{
                    this.list[i].expand=false;
                  }
                }
              }else{
                this.list=this.list.concat(res.data);
              }

              type==0&&this.$refs.scroll&&this.$refs.scroll.finishPullToRefresh();
              console.log("=====",res.data&&res.data.length<this.$rows)
              if(res.data&&res.data.length<this.$rows||res.data==undefined){
                this.hasNext=false;
                type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(true);
              }else{
                this.hasNext=true;
                type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(false);
              }
            }else{
              this.hasNext=false;
              this.$vux.toast.text(res.msg, 'center');
              type==0&&this.$refs.scroll&&this.$refs.scroll.finishPullToRefresh();
              type==1&&this.$refs.scroll&&this.$refs.scroll.finishInfinite(false);
            }
          },{pageNo :this.page,pageSize:this.$rows,searchKey:this.searchKey});
        },
        refresh(){
          this.hasNext=true;
          this.page=1;
          this.initData(0);
        },
        infinite(){
          if(this.hasNext){
            this.page++;
            this.initData(1);
          }else{
            this.$refs.scroll&&this.$refs.scroll.finishInfinite(true)
          }
        },
        expandList(item,index){
          if(this.lastSelectIndex.index==-1){
            this.lastSelectIndex.index=index;
            this.lastSelectIndex.id=item.id;
            item.expand=!item.expand;
            this.$set(this.list,this.lastSelectIndex.index,item)
          }else{
            if(this.lastSelectIndex.index!=index){
              this.list[this.lastSelectIndex.index].expand=false;
              this.$set(this.list,this.lastSelectIndex.index,this.list[this.lastSelectIndex.index])
              item.expand=!item.expand;
              this.lastSelectIndex.index=index;
              this.lastSelectIndex.id=item.id;
              this.$set(this.list,index,item)
            }else{
              this.lastSelectIndex.index=index;
              this.lastSelectIndex.id=item.id;
              item.expand=!item.expand;
              this.$set(this.list,this.lastSelectIndex.index,item)
            }
          }
        },
        search(){
          if(this.searchKey.trim().length==0){
            this.$vux.toast.text("请输入关键词", 'center');
            return;
          }
          this.refresh();
        },
        comfirm(){
          if(this.lastSelectIndex.index>=0){
            if(this.$fromApp(this)){
              this.$callJava({code:1006,obj:this.list[this.lastSelectIndex.index]})
            }
          }
        },
        goDetail(item){
          if(this.$fromApp(this)){
            this.$callJava({url:this.$webUrl+"good/detail?from=app&id="+item.id+"&type=1"+"&Authorization="+this.$storage.get("token"),title:"商品详情"})
          }else{
            this.$router.push({ path:'/good/detail',query:{id:item.id,type:1}})
          }
        },
        goBack(){
          if(this.$fromApp(this)){
           this.$callJava({code:1006})
          }else{
            this.$router.go(-1);
          }
        }
      }

    }
</script>

<style lang="less" type="text/less" scoped>
  .good-select{
    background: #fff;
    .header-left{
      margin-top: -7px;
    }
    /deep/ .vux-header{
      background: #fff !important;
    }
    .vux-table{
      line-height: normal;
      tr{
        height: 1rem;
      }
    }
     .title-lable{
      font-size:0.36rem;
      font-weight:bold;
       color:rgba(51,51,51,1);
       margin-left: .25rem;
    }
    .search{
      padding: .3rem .3rem 0 .3rem;
    }
    .good-content{

    }
    .btn-comfirm{
      text-align: center;
      height:.84rem;
      line-height: .84rem;
      background:rgba(82,125,217,0);
      border:1px solid rgba(251,110,82,1);
      border-radius:.42rem;
      margin: .2rem .65rem .5rem .65rem;
      span{
        color:#FB6E52 ;
        font-size: .34rem;
      }
    }
    /deep/ .weui-cells:before,/deep/ .weui-cells:after{
      border: none;
    }
    /deep/ .weui-cells{
      margin-top: 0;
    }
    /deep/ .weui-input{
      font-size: .28rem;
    }
    .weui-cell{
      padding: 6px 10px;
      border: 1px solid #ddd;
      border-radius: .1rem;
    }
    .btn-serach-container{
      text-align: left;
    }
    .btn-search{
      background:rgba(142,145,159,0.2);
      border:1px solid rgba(200,203,211,1);
      border-radius:.06rem;
      padding: .1rem .3rem;
      color: #868999;
      font-size: .3rem;
      margin-left: .2rem;
    }
    .list{
      height: 100%;
      position: relative;
      padding: .3rem;
      /deep/ .vux-table td:before, .vux-table th:before{
        border: none;
      }
      /deep/ .vux-table td:after, .vux-table th:after{
        border: none;
      }
      /deep/ .vux-table:after{
        border: none;
      }

       .vux-table th{
        font-weight: bold;
      }
       .id{
          width: 10%;
       }
      .brand{
        width: 20%;
      }
      .name{
        width: 30%;
      }
      .spec{
        width: 20%;
      }
      .operate{
        width: 20%;
      }
      /deep/ .weui-icon-circle, /deep/ .weui-icon-success{
        font-size: .36rem;
      }
      /deep/ .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before{
        color: #FB6E52;
      }

      .icon-detail{
        width: .32rem;
        height: .32rem;
        vertical-align: middle;
      }
      .detail-lable{
        vertical-align: middle;
        margin-left: .05rem;
      }
      .col-item{
          color: #333;
          font-size: .28rem;
        position: relative;
        margin-bottom: -0.03rem;
      }

    }
    .check-normal{
      fill: #bbb;
      vertical-align: middle;
    }
    .check-active{
      fill: #FB6E52;
      vertical-align: middle;
    }

  }
</style>
